<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
const echarts = require('echarts/lib/echarts')
// 引入 ECharts 主模块
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
// require('echarts/lib/component/dataZoom')
require('echarts/lib/component/grid')
require('echarts/lib/chart/custom')
import { debounce } from '@/utils'
import { timeFormatStr } from '@/utils/pickTime'
import { statusColors } from '@/assets/echarts/eqpStatusTheme'

function renderItem(params, api) {
  var categoryIndex = api.value(0)
  var start = api.coord([api.value(1), categoryIndex])
  var end = api.coord([api.value(2), categoryIndex])
  var height = api.size([0, 1])[1] * 0.6
  var rectShape = echarts.graphic.clipRectByRect({
    x: start[0],
    y: start[1],
    width: end[0] - start[0],
    height: height
  }, {
    x: params.coordSys.x,
    y: params.coordSys.y,
    width: params.coordSys.width,
    height: params.coordSys.height
  })

  return rectShape && {
    type: 'rect',
    transition: ['shape'],
    shape: rectShape,
    style: api.style()
  }
}
const showLegend = Object.keys(statusColors).map((item, index) => {
  return {
    name: item,
    type: 'custom'
  }
})
export default {
  name: 'CustomChart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: () => ([])
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      handler() {
        this.initChart()
      }
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.chart.setOption({
        tooltip: {
          formatter: function(params) {
            const times = (params.value[3].endTime - params.value[3].startTime) / 1000
            const day = Math.floor(times / (60 * 60 * 24))
            const hour = Math.floor((times / (60 * 60)) - day * 24)
            const minutes = Math.floor((times / 60) - hour * 60 - day * 24 * 60)
            return `<div>设备状态: ${params.value[3].eqpStatus}</div>
            <div>开始时间: ${timeFormatStr(params.value[3].startTime)}</div>
            <div>结束时间: ${timeFormatStr(params.value[3].endTime)}</div>
            <div>持续时间: ${day}天${hour}小时${minutes}分钟</div>
            `
          }
        },
        color: [''].concat(Object.keys(statusColors).map(c => statusColors[c])),
        legend: {
          top: '20%',
          left: '50%',
          data: [''].concat(Object.keys(statusColors).map(c => c))
        },
        title: {
          text: this.title,
          left: '8%',
          top: '20%'
        },
        // dataZoom: [
        //   {
        //     show: true,
        //     start: 0,
        //     end: 70
        //   },
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 60
        //   }
        // ],
        grid: {
          height: 60
        },
        xAxis: {
          scale: true,
          axisLabel: {
            formatter: function(val) {
              return timeFormatStr(val)
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          show: false,
          data: []
        },
        series: [{
          type: 'custom',
          renderItem: renderItem,
          itemStyle: {
            opacity: 0.8
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: this.chartData
        },
        ...showLegend
        ]
      })
    }
  }
}
</script>
